<!-- components/PostCard.vue -->
<template>
  <div class="card-hover">
    <div class="relative rounded-xl overflow-hidden" style="border-radius: 5px;">
      <img :src="post.imageUrl" alt="内容图片" class="w-full" @click="$emit('toUrl')">

      <!-- 位置信息 -->
      <div v-if="post.location"
        class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/50 to-transparent p-3">
        <span class="text-white text-shadow text-sm"><i class="fa fa-map-marker mr-1"></i> {{ post.location }}</span>
      </div>

      <!-- 分类标签 -->
      <div v-if="post.category" class="absolute top-2 right-2 bg-primary/90 text-white text-xs px-2 py-1 rounded-full">
        {{ post.category }}
      </div>
    </div>

    <div class="px-1">
      <div @click="$emit('toUrl')" class="flex items-center mb-2" v-if="post.userAvatar || post.userName">
        <div class="w-8 h-8 rounded-full overflow-hidden mr-2">
          <img :src="post.userAvatar" alt="用户头像" class="w-full h-full object-cover">
        </div>
        <span class="text-sm font-medium">{{ post.userName }}</span>
      </div>

      <p class="text-sm mb-3 line-clamp-1" style="text-align: center;" v-if="post.subTitle" @click="$emit('toUrl')">{{ post.subTitle }}</p>
      <p class="text-sm mb-3 line-clamp-2" v-if="post.content" @click="$emit('toUrl')">{{ post.content }}</p>

      <div class="flex items-center justify-between text-xs text-gray-dark"
        v-if="post.likes || post.comments || post.collects">
        <div class="flex space-x-4">
          <!-- 点赞按钮 -->
          <button class="flex items-center transition-colors group"
            :class="post.hasLiked ? 'text-primary' : 'hover:text-primary'" @click="$emit('like')">
            <i class="mr-1 group-hover:animate-pulse" :class="post.hasLiked ? 'fa fa-heart' : 'fa fa-heart-o'"></i>
            <span>{{ post.likes }}</span>
          </button>

          <!-- 评论按钮 -->
          <button class="flex items-center hover:text-primary transition-colors">
            <i class="fa fa-comment-o mr-1"></i>
            <span>{{ post.comments }}</span>
          </button>

          <!-- 收藏按钮 -->
          <button class="flex items-center transition-colors"
            :class="post.hasCollected ? 'text-primary' : 'hover:text-primary'" @click="$emit('collect')">
            <i :class="post.hasCollected ? 'fa fa-star' : 'fa fa-star-o'"></i>
            <span class="ml-1">{{ post.collects }}</span>
          </button>
        </div>
        <!-- 分享按钮 -->
        <button class="hover:text-primary transition-colors">
          <i class="fa fa-share-alt"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PostCard',
  props: {
    post: {
      type: Object,
      required: true
    }
  }
}
</script>
<style scoped>
  .cardBor{
    border:5px solid #3c9cff;
    border-radius: 10px;
  }
</style>